<%--
  Created by IntelliJ IDEA.
  User: xlro
  Date: 2021/4/23
  Time: 1:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录- 图书管理系统</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="jQuery/css/htmleaf-demo.css">
    <link rel="stylesheet" href="jQuery/css/style.css"/>
    <style>
        .demo-class {
            text-shadow: 0 0 0 #fff;
            color: black;
            font-size: 4px;
            shade: 0.8 '#393D49';
        }

        #top-image {
            background: linear-gradient(
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2)
            ), url('jQuery/images/1.jpg') no-repeat fixed;
            position:fixed ;
            top:0;
            width:100%;
            z-index:0;
            height:100%;
        }

        html, body {
            font-size: 14px;
            width: 100%;
            height: 100%;
            color: #fff;
            text-shadow: 2px -1px 4px #000;
        }
        input{
            color: #fff!important;
        }
        input::-webkit-input-placeholder{
            color: #fff!important;
        }

        .login-layout {
            position: absolute;
            width: 500px;
            left: 50%;
            top: 50%;
            border-radius: .75rem;
            transform: translate(-50%, -50%);
            background: rgba(255,255,255, 0.06);
            padding: 100px 80px 80px 50px;
            backdrop-filter: blur(10px);
            display: flex;
            justify-content: center;

        }

        .logo{
            font-size: 30px;
            width: 100%;
            text-align: center;
            margin-bottom: -10px;
        }


        .layui-input{
            background-color: rgba(255,255,255, 0.3);
            border: 0;
        }

        .layui-form{
            width: 400px!important;
        }
    </style>
</head>
<body>

<%@include file="alert.jsp"%>

<div id="top-image">
    <div class="login">
        <div class="login-layout">
            <form class="layui-form" method="post" action="/register" style="position: relative;top:-30px;left: 30px">
                <br>
                <div class="layui-form-item">
                    <!-- 用户名 -->
                    <div class="layui-inline" style="width: 85%">
                        <input type="text" name="reader" required
                               lay-verify="required" placeholder="姓名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <!-- 登录账号 -->
                    <div class="layui-inline" style="width: 85%">
                        <input type="text" name="username"
                               required lay-verify="required"
                               autocomplete="off" placeholder="登陆账号"
                               class="layui-input">
                    </div>
                </div>
                <!-- 密码 -->
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 85%">
                        <input type="password" name="password" placeholder="输入密码"
                               required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <!-- 确认密码 -->
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 85%">
                        <input type="password" name="againPassword"
                               required lay-verify="required"
                               autocomplete="off" placeholder="确认密码"
                               class="layui-input">
                    </div>
                </div>

                <br><br>
                <div class="layui-form-item">
                    <button type="submit" lay-submit lay-filter="sub"
                            class="layui-btn" style="width: 85%;margin-left: 0%">注册
                    </button>
                </div>
                <br>
                <hr style="width: 100%"/>
                <p style="width: 100%"><a href="index.jsp" class="fl">
                    已有账号？立即登录</a><a href="javascript:;"
                                    style="float: right">忘记密码？
                </a></p>
            </form>
        </div>
    </div>
</div>

        <script src="layui/layui.js"></script>
        <script src="jQuery/js/jquery-1.11.0.min.js"></script>
        <script src="jQuery/js/ios-parallax.js"></script>


        <script>
            layui.use('layer', function(){
                var layer = layui.layer;

                layer.config({
                    skin: 'demo-class'
                })

            });
        </script>

        <script>
            layui.use('form', function(){
                var form = layui.form;

                //各种基于事件的操作，下面会有进一步介绍
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#top-image').iosParallax({
                    movementFactor: 500,
                    dampenFactor: 100
                });
            });
        </script>
</body>
</html>